<template>
<div class="footer">
  <dl>
    <dt>{{footerMsg.service.title}}</dt>
    <dd v-for="(item ,index) in footerMsg.service.content " :key="index">{{item}}</dd>
  </dl>
  <dl>
    <dt>{{footerMsg.tool.title}}</dt>
    <dd v-for="( v ,i ) in footerMsg.tool.content " :key="i.id">{{v}}</dd>
  </dl>
  <dl>
    <dt>{{footerMsg.about.title}}</dt>
    <dd v-for="(about,c) in footerMsg.about.content" :key="c.id" >{{about}}</dd>
  </dl>

</div>
</template>

<script>
export default {
  data () {
    return {
      footerMsg: {
        service: {
          title: '服务',
          content: ['币币交易', '火币交易', '法币交易']
        },
        tool: {
          title: '工具',
          content: ['币币交易', '火币交易', '法币交易']
        },
        about: {
          title: '关于我们',
          content: ['币币交易', '火币交易', '法币交易']
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  // height: 100px;
  background: skyblue;
  // position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  dl{
   flex: 1;
   background: red;
  //  height: 100px;
  text-align: center;
  }
  dt{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    dd{

    }
  }
}
</style>
